﻿
@{
    ViewBag.Title = "AllAnalyse";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<div class="layui-form-item" style="position:relative">
    <label class="layui-form-label" style="width:100px;">单行选择框</label>
    <div class="layui-input-inline" style="position:absolute;top:10px">
        <select name="year" id="year" lay-filter="year">
        </select>
    </div>
</div>
<div id="main" style="width: 800px;height:500px;"></div>
<script>
    
</script>
<script type="text/javascript">
    window.onload = function () {
        var myChart = echarts.init(document.getElementById('main'));
        option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: { type: 'cross' }
            },
            legend: {},
            xAxis: [
                {
                    type: 'category',
                    axisTick: {
                        alignWithLabel: true
                    },
                    data: [
                        '1月',
                        '2月',
                        '3月',
                        '4月',
                        '5月',
                        '6月',
                        '7月',
                        '8月',
                        '9月',
                        '10月',
                        '11月',
                        '12月'
                    ]
                }
            ],
            yAxis: [

                {
                    type: 'value',
                    name: '产妇数量',
                    min: 0,
                    max: 10,
                    position: 'left',
                }
            ],
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        var userdata
        // 获取当前年份
        const currentYear = new Date().getFullYear();

        // 获取<select>元素
        const selectElement = document.getElementById('year');

        // 往前推5年，生成选项
        for (let i = 0; i < 6; i++) {
            const year = currentYear - i; // 计算年份
            const option = document.createElement('option'); // 创建新的<option>元素
            option.value = year; // 设置value
            option.textContent = year; // 设置显示文本

            // 如果是当前年份，设为默认选中
            if (year === currentYear) {
                option.selected = true;
            }

            // 将<option>元素添加到<select>中
            selectElement.appendChild(option);
        }
        var selectedYear = currentYear; // 默认选中当前年份
        // 监听年份选择变化
        selectElement.addEventListener('change', function (event) {
            selectedYear = event.target.value;
            updateChartData(userdata);
        });

        // 获取StaffData并更新图表
        $.post("/manager/DataList", { page: 1, limit: 10 }, function (data) {
            userdata = data.data;
            updateChartData(userdata);
        });
        // 根据当前选择的年份和用户数据来更新图表
        function updateChartData(userdata) {
            let seriesData = [];

            // 对每个员工的数据进行处理
            userdata.forEach((item) => {
                $.post("/manager/SingleData", { data: JSON.stringify(item) }, function (result) {
                    var counts1 = result.data.ResultList.find(item => item.Year === selectedYear)?.Counts || [];

                    // 每次获取到数据后立刻更新图表
                    seriesData.push({
                        type: 'line',
                        name: item.Name + '的产妇录入数量',
                        data: counts1
                    });

                    // 每获取到一个员工的数据后立即更新图表
                    myChart.setOption({
                        series: seriesData
                    });
                });
            });
        }
        }
  
</script>

